<template>
  <div class="app-container">
    <el-form v-enterToNext="true" ref="postForm" :model="postForm" :rules="rules" status-icon label-width="150px" class="demo-ruleForm">
      <el-form-item label="编号" prop="no">
        <el-input v-model="postForm.no"/>
      </el-form-item>
      <!--      <el-form-item label="类型" prop="type">-->
      <!--        <el-select v-model="postForm.type" filterable clearable placeholder="请选择" size="mini">-->
      <!--          <el-option-->
      <!--            v-for="item in options"-->
      <!--            :key="item.ID"-->
      <!--            :label="item.Name"-->
      <!--            :value="item.ID"/>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <el-form-item label="名称" prop="name">
        <el-input v-model="postForm.name"/>
      </el-form-item>
      <el-form-item label="颜色" prop="colour">
        <el-input v-model="postForm.colour"/>
      </el-form-item>
      <el-form-item label="安全存量" prop="merchandiseSafetyStock">
        <el-input v-model.number="postForm.merchandiseSafetyStock"/>
      </el-form-item>
      <el-form-item label="目标销量" prop="presaleNumber">
        <el-input v-model.number="postForm.presaleNumber"/>
      </el-form-item>
      <el-form-item label="尺寸" prop="size">
        <el-input v-model="postForm.size"/>
      </el-form-item>
      <el-form-item label="单个进价(元)" prop="purchase_price">
        <el-input v-model.number="postForm.purchase_price"/>
      </el-form-item>
      <el-form-item label="单个重量(g)" prop="weight">
        <el-input v-model.number="postForm.weight"/>
      </el-form-item>
      <el-form-item label="件/毛重(kg)" prop="packgeWeight">
        <el-input v-model.number="postForm.packgeWeight"/>
      </el-form-item>
      <el-form-item label="装箱数" prop="packgeNum">
        <el-input v-model.number="postForm.packgeNum"/>
      </el-form-item>
      <el-form-item label="整件箱规" prop="packgeCube">
        <el-input v-model="postForm.packgeCube"/>
      </el-form-item>
      <el-form-item label="供应商" prop="supply">
        <el-select v-model="postForm.supply" filterable clearable placeholder="请选择" size="mini">
          <el-option
            v-for="item in supplys"
            :key="item.ID"
            :label="item.Name"
            :value="item.ID"/>
        </el-select>
      </el-form-item>
      <el-form-item label="位置" prop="location">
        <el-autocomplete
          v-model="postForm.location"
          :fetch-suggestions="querySearch"
          class="inline-input"
          placeholder="请输入位置"
          @select="handleSelect"
        />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="postForm.remark"/>
      </el-form-item>
    </el-form>
    <br>
    <span style="font-size: 14px;font-weight: 700;color: red;font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;margin-left: 8px"> 请选择配件 : </span>
    <el-select v-model="selectValue" filterable clearable placeholder="请选择" size="mini" @change="selectChange">
      <el-option
        v-for="item in selectValues"
        :key="item.ID"
        :label="item.No"
        :value="item"
        :disabled="item.Disabled"/>
    </el-select>
    <el-table :data="components" style="width: 100%">
      <el-table-column label="配件编号" prop="No"/>
      <el-table-column label="配件名称" prop="Name"/>
      <el-table-column label="单个配件进价(元)" prop="PurchasePrice"/>
      <el-table-column label="配件供应商" prop="Supply"/>
      <el-table-column label="配件数量" width="150">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.Quantity" :min="0" size="mini" @change="handleChange()"/>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.$index,scope.row)"/>
        </template>
      </el-table-column>
    </el-table>
    <br >
    <div>
      <el-button :loading="loading" type="primary" size="mini" @click="submitForm">提交</el-button>
      <el-button size="mini" @click="resetForm">重置</el-button>
    </div>
  </div>
</template>

<script>

import { createCommodity, getCommodityType, getLocation } from '@/api/commodity'
import { getComponents } from '@/api/component'
import { getSupply } from '@/api/supply'

export default {
  data() {
    return {
      loading: false,
      selectValue: '',
      selectValues: [],
      components: [],
      options: [],
      supplys: [],
      locations: [],
      postForm: {
        id: '',
        no: '',
        type: '',
        name: '',
        colour: '',
        remark: '',
        supply: '',
        location: '',
        merchandiseSafetyStock: 0,
        presaleNumber: 0,
        packgeNum: 0,
        packgeCube: '',
        packgeWeight: 0,
        weight: 0,
        size: '',
        purchase_price: 0,
        Ponents: []
      },
      rules: {
        no: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        // type: [
        //   { required: true, message: '请输入', trigger: 'blur' }
        // ],
        name: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        packgeNum: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        supply: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        location: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        merchandiseSafetyStock: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    submitForm() {
      this.$refs['postForm'].validate(valid => {
        if (valid) {
          const len = this.components.length
          if (len > 0) {
            for (let i = 0; i < len; i++) {
              if (this.components[i].Quantity <= 0) {
                this.$message.error('配件数量不能为 0')
                this.postForm.Ponents = []
                return
              }
              this.postForm.Ponents.push({
                ID: this.components[i].ID,
                Number: this.components[i].Quantity
              })
            }
          }
          console.log(this.postForm)
          this.loading = true
          this.postForm.id = this.postForm.no
          createCommodity(this.postForm)
            .then(response => {
              console.log(response)
              this.loading = false
              this.resetForm()
              this.$message.success('创建成功')
            })
            .catch(() => {
              this.loading = false
              this.postForm.Ponents = []
              this.$message.error('创建失败')
            })
        }
      })
    },
    resetForm() {
      this.postForm.id = ''
      this.postForm.no = ''
      this.postForm.type = ''
      this.postForm.name = ''
      this.postForm.colour = ''
      this.postForm.remark = ''
      this.postForm.supply = ''
      this.postForm.location = ''
      this.postForm.merchandiseSafetyStock = 0
      this.postForm.presaleNumber = 0
      this.postForm.packgeNum = 0
      this.postForm.packgeCube = ''
      this.postForm.packgeWeight = 0
      this.postForm.weight = 0
      this.postForm.size = ''
      this.postForm.purchase_price = 0
      this.postForm.Ponents = []
      for (let i = 0; i < this.components.length; i++) {
        this.components[i].Disabled = false
      }
      this.components = []
    },
    fetchData() {
      getCommodityType().then(response => {
        console.log(response)
        this.options = response.map(item => {
          return {
            ID: item.ID,
            Name: item.Name
          }
        })
      })
      getSupply().then(response => {
        console.log(response)
        this.supplys = response.map(item => {
          return {
            ID: item.Name,
            Name: item.Name
          }
        })
      })
      getLocation().then(response => {
        console.log(response)
        this.locations = response.map(item => {
          return {
            value: item.Location
          }
        })
      })
      getComponents().then(response => {
        console.log(response)
        this.selectValues = response.map(item => {
          return {
            Quantity: 0,
            ID: item.ID,
            No: item.No,
            Name: item.Name,
            PurchasePrice: item.PurchasePrice,
            Supply: item.Supply
          }
        })
      })
    },
    selectChange() {
      if (this.selectValue !== '') {
        this.selectValue.Disabled = true
        this.components.push(this.selectValue)
        this.selectValue = ''
      }
    },
    handleDelete(index, row) {
      this.components.splice(index, 1)
      row.Disabled = false
    },
    querySearch(queryString, cb) {
      var locations = this.locations
      var results = queryString ? locations.filter(this.createFilter(queryString)) : locations
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    }
  }
}
</script>
